<template>
<div>
  <h1>添加货物类型</h1>
    <div class="add">
      <Button @click="onSubmit" color="green">确认添加</Button>
    </div>

    <div class="basis">
        <el-form ref="form" :model="form" label-width="80px">
          <br>
    <el-form-item label="设备类型">
        <el-select v-model="mold" placeholder="请选择设备类型">
        <el-option label="MOT_U202" value="MOT_U202"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="名称" >
        <el-input v-model="name" ></el-input>
    </el-form-item>
    <el-form-item label="延迟开始">
        <el-input v-model="delay"  placeholder="最小单位：5分钟，范围0~1275分钟"></el-input>
    </el-form-item>
    <el-form-item label="描述">
        <el-input type="describe" v-model="describe" placeholder="请填写(可选)"></el-input>
    </el-form-item>
    <el-form-item label="记录间隔">
        <el-input v-model="interval"  placeholder="最小单位：0.5分钟，范围0.5~127.5分钟"></el-input>
    </el-form-item>
    <!-- <FormItem label="理想温度"> -->
    <el-form-item label="理想温度">
        <input type="text" v-model=" temperature1" placeholder="理想最低温度。单位:摄氏度">
        至
        <input type="text" v-model=" temperature2" placeholder="理想最低温度。单位:摄氏度">
    </el-form-item>
      <!-- </FormItem> -->
    </el-form>

    </div>

    <hr>
 <!-- style="float:right" -->
    <div>
      <div class="baojingone">
        <h5>报警设置-报警1</h5>
        是否开启
        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        <br>
        <el-form ref="form" :model="form" label-width="80px" v-if="value==true">
              <br>
          <el-form-item label="报警类型">
              <el-select v-model="bj_type" placeholder="请选择报警类型">
                <el-option label="单温上限-单个事件" value="bg1_1"></el-option>
                <el-option label="单温下限-单个事件" value="bg1_2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="温度范围">
              <el-input v-model="num" ></el-input>
          </el-form-item>
          <el-form-item label="阈值">
              <el-input v-model="rang1" ></el-input>
          </el-form-item>

          <!-- </FormItem> -->
        </el-form>
        <span v-else>未开启报警设置</span>

      </div>
      <br>
      <div class="baojingone2">
        <h5>报警设置-报警2</h5>
        是否开启
        <el-switch
          v-model="value2"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        <br>
        <el-form ref="form" :model="form" label-width="80px" v-if="value2==true">
              <br>
          <el-form-item label="报警类型">
              <el-select v-model="bj_type2" placeholder="请选择报警类型">
                <el-option label="单温上限-单个事件" value="bg2_1"></el-option>
                <el-option label="单温下限-单个事件" value="bg2_2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="温度范围" >
              <el-input v-model="num2" ></el-input>
          </el-form-item>
          <el-form-item label="阈值" >
              <el-input v-model="rang2" ></el-input>
          </el-form-item>


          <!-- </FormItem> -->
        </el-form>
        <span v-else>未开启报警设置</span>


      </div>

      <br>
      <div class="baojingone3">
        <h5>报警设置-报警3</h5>
        是否开启
        <el-switch
          v-model="value3"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        <br>
        <el-form ref="form" :model="form" label-width="80px" v-if="value3==true">
              <br>
          <el-form-item label="报警类型">
              <el-select v-model="bj_type3" placeholder="请选择报警类型">
                <el-option label="单温上限-单个事件" value="bg3_1"></el-option>
                <el-option label="单温下限-单个事件" value="bg3_2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="温度范围" >
              <el-input v-model="num3" ></el-input>
          </el-form-item>
          <el-form-item label="阈值" >
              <el-input v-model="rang3" ></el-input>
          </el-form-item>


          <!-- </FormItem> -->
        </el-form>
        <span v-else>未开启报警设置</span>


      </div>

      <br>

      <div class="baojingone3">
        <h5>报警设置-报警4</h5>
        是否开启
        <el-switch
          v-model="value4"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        <br>
        <el-form ref="form" :model="form" label-width="80px" v-if="value4==true">
              <br>
          <el-form-item label="报警类型">
              <el-select v-model="bj_type4" placeholder="请选择报警类型">
                <el-option label="单温上限-单个事件" value="bg4_1"></el-option>
                <el-option label="单温下限-单个事件" value="bg4_2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="温度范围" >
              <el-input v-model="num4" ></el-input>
          </el-form-item>
          <el-form-item label="阈值" >
              <el-input v-model="rang4" ></el-input>
          </el-form-item>


          <!-- </FormItem> -->
        </el-form>
        <span v-else>未开启报警设置</span>


      </div>

      <br>

      <div class="baojingone3">
        <h5>报警设置-报警5</h5>
        是否开启
        <el-switch
          v-model="value5"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        <br>
        <el-form ref="form" :model="form" label-width="80px" v-if="value5==true">
              <br>
          <el-form-item label="报警类型">
              <el-select v-model="bj_type5" placeholder="请选择报警类型">
                <el-option label="单温上限-单个事件" value="bg5_1"></el-option>
                <el-option label="单温下限-单个事件" value="bg5_2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="温度范围" >
              <el-input v-model="num5" ></el-input>
          </el-form-item>
          <el-form-item label="阈值" >
              <el-input v-model="rang5" ></el-input>
          </el-form-item>


          <!-- </FormItem> -->
        </el-form>
        <span v-else>未开启报警设置</span>


      </div>

      <br>

      <div class="baojingone3">
        <h5>报警设置-报警6</h5>
        是否开启
        <el-switch
          v-model="value6"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
        <br>
        <el-form ref="form" :model="form" label-width="80px" v-if="value6==true">
              <br>
          <el-form-item label="报警类型">
              <el-select v-model="bj_type6" placeholder="请选择报警类型">
                <el-option label="单温上限-单个事件" value="bg6_1"></el-option>
                <el-option label="单温下限-单个事件" value="bg6_2"></el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="温度范围" >
              <el-input v-model="num6" ></el-input>
          </el-form-item>
          <el-form-item label="阈值" >
              <el-input v-model="rang6" ></el-input>
          </el-form-item>


          <!-- </FormItem> -->
        </el-form>
        <span v-else>未开启报警设置</span>


      </div>


    </div>

</div>
</template>
<style>
  .baojingone3{
    background-color: rgb(255, 255, 255);
    width: 300px;
    height: 250px;
  }
  .baojingone2{
    background-color: rgb(255, 255, 255);
    width: 300px;
    height: 250px;
  }
  .baojingone{
    background-color: rgb(255, 255, 255);
    width: 300px;
    height: 250px;
  }
  .basis{
    background-color: rgb(255, 255, 255);
    width: 40%;
    height: 30%;
  }
</style>
<script>
import { addgenre_post } from './axios_api/api';
  export default {
    data() {
      return {
        bj_type6:"",
        bj_type5:"",
        bj_type4:"",
        bj_type3:"",
        bj_type2:"",
        num6:"",
        num5:"",
        num4:"",
        num3:"",
        num2:"",
        rang1:0,
        rang2:0,
        rang3:0,
        rang4:0,
        rang5:0,
        rang6:0,
        value6:false,
        value5:false,
        value4:false,
        value3:false,
        value2:false,
        value: false,
        num:"",
          bj_type:"",
          temperature1:"",
          temperature2:"",
          mold:"",
          name:"",
          delay:"",
          describe:"",
          interval:"",
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      onSubmit() {
        var type = localStorage.getItem('type')
          if(this.temperature1>=this.temperature2){
              this.$Message("最低温应低于最高温");
              return;
          }else{
              var data = {name:this.name, mold:this.mold, delay:this.delay, describe:this.describe, interval:this.interval, temperature1:this.temperature1, temperature2:this.temperature2,num:this.num}
              if(type==5){
                addgenre_post(data).then(resp=>{
                  this.$Message(resp.message)
              })
              }else(
                this.$Message("权限不足")
              )
          }
      }
    }
  }
</script>